<template>
  <div class="container_box">
    <el-descriptions title="自定义tree组件">
      <el-descriptions-item label="描述">
        自己手撸封装的menu组件，为满足特殊场景下的需求，目前可支持二级菜单、超出省略。
      </el-descriptions-item>
    </el-descriptions>
    <CustomMenuBox
      :pagePath="pagePath"
      :menuList="menuList"
      :omitMenuList="omitMenuList"
      :themeColor="'#36f7ff'"
      @handleSelect="linkTo"
    />
  </div>
</template>

<script setup>
import { useRoute, useRouter } from "vue-router";
import { useUserStore } from "@/store";
import { storeToRefs } from "pinia";
import { ref, watch } from "vue";

const router = useRouter();
const route = useRoute();

const userStore = useUserStore();
const { menuRoutes } = storeToRefs(userStore);

const pagePath = ref(route.path);
const menuList = ref([]);
const omitMenuList = ref([]); // 超出省略的菜单，根据菜单的宽度和item的宽度得到个数

watch(
  () => route.path,
  (newValue) => {
    pagePath.value = newValue;
  },
);

watch(
  () => menuRoutes.value,
  (newValue) => {
    if (newValue.length && newValue.length <= 8) {
      menuList.value = newValue;
      omitMenuList.value = [];
    } else {
      menuList.value = newValue.slice(0, 7);
      omitMenuList.value = newValue.slice(7);
    }
  },
  {
    immediate: true,
  },
);

const linkTo = (item) => {
  router.push(item.path);
};
</script>

<style lang="less" scoped>
.menu_box {
  width: 84rem;
  height: calc(100vh * 46 / 1080);
  color: @default;
}
</style>
